<template>
  <div class="home">
    <p class="top-title">这是豆瓣top250</p>
    <div class="box">
      <div
        class="item-box"
        v-for="(item,index) in datas "
        :key="index"
        @click="handleDetail(item.id)"
      >
        <img class="pic" :src="item.images.small" alt />
        <p class="title">{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "home",
  mounted() {
    this.axios.get("http://douban.uieee.com/v2/movie/top250").then(res => {
      console.log(res);
      this.datas = res.data.subjects;
    });
  },
  data() {
    return {
      datas: []
    };
  },
  methods: {
    handleDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id
        }
      });
    }
  },
  filters: {
    format(val) {
      if (val.length > 6) {
        val = val.slice(0, 6) + "...";
      }
      return val;
    }
  }
};
</script>
<style scoped>
.top-title {
  font-size: 24px;
  font-weight: 600;
}
.box {
  width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}
.item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
  width: 180px;
  box-sizing: border-box;
  justify-content: space-around;
  margin-bottom: 15px;
  padding: 6px;
  border: 1px solid #333;
}
.pic {
  width: 160px;
}
</style>